<template>
  <div>
    <h3 class="vicetit">{{province}} <span>></span> {{city}}</h3>
    <div class="menu">
      <span>省</span>
      <el-select class="haveclasssta" v-model="provincevalue" placeholder="请选择">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="studysta">市</span>
      <el-select class="haveclasssta" v-model="cityvalue" placeholder="请选择">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- <span class="studysta">机关名称</span>
      <el-input class="inp" v-model="office1" placeholder=""></el-input> -->
      <el-button type="primary" class="search" @click="searchdata1"><i class="el-icon-search"></i> 搜索</el-button>
      <span class="exports">导出</span>
    </div>
    <div class="cabin">
      <table>
        <thead>
          <tr>
            <th v-for="(v,i) in headlist1" :key='i'>{{v}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(v,i) in datalist1" :key='i'>
            <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.officename }}</td>
            <td>{{ v.provincecityname }}</td>
            <td>{{ v.county }}</td>
            <td>{{ v.address }}</td>
            <td>{{ v.workphone }}</td>
            <td>{{ v.personincharge }}</td>
            <td>{{ v.contactphone }}</td>
          </tr>
          <tr v-show='datalist1.length == 0'>
            <td colspan="7" style="text-align: center;border-right: none;">无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-pagination :current-page.sync="pagecurrent1" @current-change="handleSizeChange1" background layout="prev, pager, next"
      :total="pagetotal1">
    </el-pagination>

    <div class="menu">
      <span>区县</span>
      <el-select class="haveclasssta" v-model="countys" placeholder="请选择">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="studysta">机关名称</span>
      <el-input class="inp" v-model="office2" placeholder=""></el-input>
      <el-button type="primary" class="search" @click="searchdata2"><i class="el-icon-search"></i> 搜索</el-button>
      <span class="exports">导出</span>
    </div>
    <div class="cabin">
      <table>
        <thead>
          <tr>
            <th v-for="(v,i) in headlist1" :key='i'>{{v}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(v,i) in datalist2" :key='i'>
            <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.hospitalname }}</td>
            <td>{{ v.provincecityname }}</td>
            <td>{{ v.county }}</td>
            <td>{{ v.address }}</td>
            <td>{{ v.workphone }}</td>
            <td>{{ v.contacts }}</td>
            <td>{{ v.contactphone }}</td>
          </tr>
          <tr v-show='datalist2.length == 0'>
            <td colspan="7" style="text-align: center;border-right: none;">无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-pagination :current-page.sync="pagecurrent2" @current-change="handleSizeChange2" background layout="prev, pager, next"
      :total="pagetotal2"></el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'organization',
    data() {
      return {
        currentPage1: 1,
        pagecurrent2: 1,
        pagetotal1: 10,
        pagetotal2: 10,
        provincevalue: '',
        cityvalue: '',
        office1: '',
        office2: '',
        countys: '',
        province: '',
        city: '深圳市',
        headlist1: ['机关名称', '省市', '区县', '地址', '单位电话', '负责人', '联系人电话'],
        datalist1: [],
        datalist2: [],
        options1: [{
            value: '北京',
            label: '北京'
          },
          {
            value: '内蒙古',
            label: '内蒙古'
          },
          {
            value: '山西',
            label: '山西'
          },
        ],
        options2: [{
            value: '北京',
            label: '北京'
          },
          {
            value: '包头',
            label: '包头'
          },
          {
            value: '太原',
            label: '太原'
          },
        ],
        pagecurrent1: 1,
        pagecurrent12: 1,
        pagesize: 5,
        county: ''
      }
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      changepage1(v) {
        alert(1)
        console.log(1)
      },
      handleSizeChange1(val) {
        console.log(val);
        this.pagecurrent1 = val;
        this.getlistpage1()
      },
      handleSizeChange2(val) {
        console.log(val);
        this.pagecurrent2 = val;
        this.getlistpage2()
      },
      searchdata1() {
        this.getlistpage1()
      },
      searchdata2() {
        this.getlistpage2()
      },
      // 用户信息
      getUserInfo() {
        this.$http('/user/loginindex', {}).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.province = res.data.user.province;
              this.city = res.data.user.cityname;
              this.county = res.data.user.county;
              this.$store.commit('changeagent',res.data.user.organizationname);
              this.$store.commit('changeagenter',res.data.user.collegename);
              this.$store.commit('changeuser',res.data.user.username);
              this.$store.commit('changephone',res.data.user.phone);
              this.$store.commit('changerole',res.data.roleid);
              this.$store.commit('changeposition',res.data.user.position);
            }
            this.getlist()
          }
        )
      },
      getlist() {
        this.$http('/medicalandhospital/getmanage', {
          "pagecurrent": 1,
          "pagesize": this.pagesize,
          "county": this.county,
          "provincecityname": this.province,
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalist1 = res.data.medical.records;
            this.datalist2 = res.data.hospital.records
            this.pagetotal1 = Math.ceil(this.datalist1.length / this.pagesize) * 10;
            this.pagetotal2 = Math.ceil(this.datalist2.length / this.pagesize) * 10
          }
        })
      },
      getlistpage1() {
        this.$http('/medical/page', {
          "pagecurrent": this.pagecurrent1,
          "pagesize": this.pagesize,
          "county": this.cityvalue,
          "provincecityname": this.provincevalue
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalist1 = res.data.medical.records;
            this.pagetotal1 = Math.ceil(this.datalist1.length / this.pagesize) * 10
          }
        })
      },
      getlistpage2() {
        this.$http('/hospital/page', {
          "pagecurrent": this.pagecurrent2,
          "pagesize": this.pagesize,
          "county": this.office2,
          "provincecityname": this.countys,
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalist2 = res.data.hospital.records
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-pagination{
    margin: 30px 0;
  }
  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    background-color: #090f42;
    color: #fff;
    border: 1px solid #1a2497;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: #1520be;
        border-color: #1520be;
  }

  .vicetit {
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    margin: 30px 0;
    border-bottom: 1px solid #7d7d7d;
  }

  .menu {
    display: flex;
    justify-content: start;
    margin: 40px 0;

    .haveclasssta {
      /deep/ .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }

    span {
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      display: inline-block;
      margin-right: 15px;
    }

    .studysta {
      margin-left: 20px;
    }

    .exports {
      font-size: 14px;
      color: #1e29ad;
      cursor: pointer;

      &:hover {
        color: #fff;
      }
    }

    .inp {
      width: 200px;

      /deep/ .el-input__inner {
        color: #fff;
        background-color: transparent;
      }
    }

    .search {
      margin: 0 25px 0 30px;
      background-color: #1e29ad;
      border-color: #1e29ad;

      &:hover {
        background-color: #409EFF;
        border-color: #409EFF;
      }
    }

    .el-date-editor {
      /deep/ .el-input__prefix {
        display: none;
      }

      /deep/ .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }
  }

  .cabin {
    padding: 10px 20px;
    background: #000;

    table {
      width: 100%;
      display: table;
      border-collapse: collapse;

      thead {
        border-bottom: 1px solid #313445;

        th {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          line-height: 60px;

          &:first-child {
            border-right: 1px solid #313445;
          }
        }
      }

      tbody {
        tr {
          td {
            &:first-child {
              border-right: 1px solid #313445;
            }
          }
        }

        td {
          font-size: 13px;
          color: #fff;
          text-align: center;
          line-height: 60px;

          &.detail {
            color: #2a36e0;
            cursor: pointer;

            &:hover {
              color: orangered;
            }
          }

          i {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
          }

          .t1 {
            background-color: #3c3694;
          }

          .t2 {
            background-color: #ca8c38;
          }

          .t3 {
            background-color: #8a58d1;
          }

          .t4 {
            background-color: #c5506f;
          }
        }
      }
    }
  }
</style>
